

<?php $__env->startSection('title','打卡签到'); ?>
<?php $__env->startSection('css'); ?>
    <style>
        html,body,.app{
            background-color: #fff;
        }
        .top{
            background: -webkit-linear-gradient(left top, #d79705 , #dec07a); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #d79705, #dec07a); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #d79705, #dec07a); /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #d79705 , #dec07a); /* 标准的语法（必须放在最后） */
            text-align: center;
            line-height: 42px;
            padding-top: 30px;
            background-size: 100% 100%;
            margin-top: -58px;
            padding-bottom: 25px;
        }
        .top p:nth-child(2){
            font-size: 50px;
        }
        .punch_clock_active{
            background: -webkit-linear-gradient(left top, #FFF7AF , #FFE969); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(left bottom, #FFF7AF, #FFE969); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(left bottom, #FFF7AF, #FFE969); /* Firefox 3.6 - 15 */
            background: linear-gradient(to left bottom, #FFF7AF , #FFE969); /* 标准的语法（必须放在最后） */
            color: #fff;
            display: block;
            width: 100px;
            padding: 5px;
            border: 1px solid #E0DAA6;
            border-radius: 10px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .punch_clock{
            background: -webkit-linear-gradient(left top, #ddd , #aaa); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(left bottom, #ddd, #aaa); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(left bottom, #ddd, #aaa); /* Firefox 3.6 - 15 */
            background: linear-gradient(to left bottom, #ddd , #aaa); /* 标准的语法（必须放在最后） */
            color: #fff;
            display: block;
            width: 100px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 10px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .now_time{
            padding: 10px 15px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }
        .accumulative_total{
            margin: 10px 0px;
            background-color: #fff;
            padding: 5px 15px;
        }
        .gift{
            width: 80%;
            margin: 10px auto;
        }
        .get_fuli{
            float: right;
            text-align: center;
        }
        .get_fuli,.icon{
            display: inline-block;
            height: 50px;
        }
        .icon{
            width: 50px;
            background: url('/images/version1/icon_yaoqin.png') no-repeat;
            background-size: 100% 100%;
        }
        .git_button{
            outline: none;
            outline: none;
            background: #ddd;
            border: 1px solid #ddd;
            color: #fff;
            width: 64px;
            height: 28px;
            font-size: 10px;
            border-radius: 15px;
            line-height: 17px;
            margin-top: 14px;
        }
        .exchange_active{

            background: #E0DAA6;
            border: 1px solid #ddd;
            color: #fff;

        }
        .exchange{
            background: #ddd;
            border: 1px solid #ddd;
            color: #fff;
        }
        .top>p{
            color: #fff;
        }
        .top>p:nth-child(2){
            font-size: 45px;
        }
        .recharge_button{
            font-size: 12px;
            display: block;
            margin: 0 auto;
            margin-top: 30px;
            color: #fff;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #fff;
            height: 1px;
            width: 40px;
            line-height: 1px;
        }

        .nav_back,.nav_right{
            color: #fff;
            display: inline-block;
        }
        .nav_right{
            float: right;
        }
        .nav_right>a{
            color: #fff;
        }
        .exchange_button{
            display: inline-block;
            width: 73%;
            margin-top: 30px;
            border: none;
            background-color: #d79705;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
        }
        a:active{
            color: #fafafa;
        }
        .placeholder img{
            height: 18px;
        }
        .placeholder{
            text-align: center;
        }
        .calendar-date .item{
            border: 1px solid #ddd;
        }
        .calendar-top-img{
            margin-bottom: -13px;
            margin-top: -11px;
            padding: 0px 26px;
        }
    </style>
    <link rel="stylesheet" href="<?php echo e(asset('/lib/calendar/css/calendar.css')); ?>">
    <style>
        .calendar-title{
            height: 0px;
            padding: 0px;
        }
        .calendar{
            border-radius: 0px;
        }
        .calendar-top{
            padding: 0px 10px;
            border-bottom: 1px solid #FCFCFC;
            background-color: #fff;
            height: 15px;
        }
        .item.gift_item{
            background: url('/images/liping.png') no-repeat;
            background-size: 80% 80%;
            background-position:center center
        }
        .item.gift_item.active{
            border: 1px solid #dec07a;
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('container'); ?>

    <div class="body">
        <div class="nav_bar">
            <div class="nav_back"></div>
        </div>

        
        <div class="top">
            
            
            <p style="font-size: 14px">已连续连续 <span class="continuous_times"><?php echo e($pre_recode->continuous_times??'0'); ?></span>天</p>
        </div>

        
    </div>
    
    
    
    <div class="weui-flex calendar-top-img" >
        <?php for($i=0;$i<9;$i++): ?>
            <div class="weui-flex__item"><div class="placeholder"><img src="<?php echo e(asset('/images/version1/icon_calendar.png')); ?>" alt=""></div></div>
        <?php endfor; ?>
    </div>
    <div class="calendar-top">

    </div>
    <div id="calendar" class="calendar" style="background-color: #fff"></div>
    <button class="<?php echo e(empty($is_tody_clock)?'punch_clock_active':'punch_clock'); ?>"><?php echo e(empty($is_tody_clock)?'立 即 签 到':'今 日 已 签'); ?></button>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
    <script src="<?php echo e(asset('lib/calendar/js/calendar.js')); ?>"></script>
    <script>

        // 关于月份： 在设置时要-1，使用时要+1
        $(function () {
            var sum_credits = "<?php echo e($sum_credits??'0'); ?>", residue = "<?php echo e($residue-1); ?>";
            $('#calendar').calendar({
                ifSwitch: true, // 是否切换月份
                hoverDate: false, // hover是否显示当天信息
                backToday: false // 是否返回当天
            });

            if(residue < 0){
                $('.item.item-curDay').html('').addClass('gift_item');
            }else{
                $('.item.item-curDay').nextAll().eq(residue).html('').addClass('gift_item');
            }
            console.log($('.item.item-curDay'));
            console.log();

            //点击签到
            $('.punch_clock_active').click(function () {
                if($(this).hasClass('loadding')) return false;

                $(this).addClass('loadding');
                var _this= $(this);
                $.ajax({
                    url:'/ajax/punch-clock',
                    type:'post',
                    data:{'_token':window.laravel_csrf_token},
                    success:function(res){
                        if(res.code==4003){
                            showMsg(res.msg);
                            return ;
                        }
                        //连续签到已激活
                        if(res.code==203){
                            // $('.git_button').removeClass('exchange').addClass('exchange_active');
                            $('.item.gift_item').addClass('active git_button')
                        }

                        //
                        if(res.code==200 || res.code==203){
                            _this.attr('class','punch_clock').text('今 日 已 签');
                            _this.addClass('loadding');

                            $('.get_credits').text(sum_credits*1+res.value*1);

                            sum_credits = sum_credits*1+res.value*1;

                            $('.continuous_times').text($('.continuous_times').text()*1+1);
                        }
                        showMsg(res.msg);
                    },
                    error:function(){
                        _this.removeClass('loadding');
                    }

                });
            });

            //领取连续签到奖励
            $(document).on('click','.git_button',function(){

                var _this = $(this);
                if(_this.hasClass('exchange') || _this.hasClass('loadding')) return ;

                $.ajax({
                    url:'/ajax/punch-clock/get-continue-gift',
                    type:'post',
                    data:{'_token':window.laravel_csrf_token},
                    success:function (res) {
                        if(res.code==4003){
                            showMsg(res.msg);
                            return ;
                        }
                        showMsg(res.msg);

                        if(res.code==200){
                            if(res.credits && res.credits>0){
                                $('.get_credits').text(sum_credits*1+res.credits*1);
                            }
                            _this.removeClass('exchange_active','loadding').addClass('exchange');
                        }

                        return ;
                    }

                });
            });

        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts._main', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>